
<template>
    <div class="login-page">
        <!-- 视频 -->
        <div class="bg">
            <!-- <video src="http://chst.vip:8081/crm/media/bg-video.d2d602a9.mp4" loop muted autoplay></video> -->
        </div>
        <!-- 登入框主体区域 -->
        <div class="login-container">
            <div class="login-inner">
                <h1 class="title">{{ title }}</h1>
                <!-- 动态组件 -->
                <component :is="com"></component>
                <div class="toggle">
                    <svg class="icon" aria-hidden="true">
                        <use :xlink:href="'#' + icon"></use>
                    </svg>
                    <b @click="switchLoginType">{{ loginTypeTilte }}</b>
                </div>
            </div>
        </div>
    </div>
</template>


<script  setup>
import commonLogin from '../../components/Login/commonLogin.vue';
import smsLogin from "@/components/Login/smsLogin.vue";

import { reactive, toRefs, markRaw, ref } from "vue"


//控制使用的是哪种类型登入

let loginType = ref('sms') //值2个,sms/common


//markRaw 可以将响应式的对象,变成普通对象

//使用动态组件

let dynamicLoginTypeInfo = reactive({
    title: '用户名登入',
    loginTypeTilte: '点击切换短信登入',
    com: markRaw(commonLogin),
    icon: 'icon-shouji-iphone12-zhengmian'
})



let switchLoginType = () => {
    //切换成短信登入
    if (loginType.value === 'sms') {
        dynamicLoginTypeInfo.title = '短信登入'
        dynamicLoginTypeInfo.loginTypeTilte = '切换用户名登入'
        dynamicLoginTypeInfo.com = markRaw(smsLogin)
        loginType.value = 'common'
        
        dynamicLoginTypeInfo.icon = "icon-yonghuguanli"

    } else if (loginType.value === 'common') {
        //切换成常规登入
        dynamicLoginTypeInfo.title = '用户名登入'
        dynamicLoginTypeInfo.loginTypeTilte = '点击切换短信登入'
        dynamicLoginTypeInfo.com = markRaw(commonLogin)
        loginType.value = 'sms'
        dynamicLoginTypeInfo.icon = "icon-shouji-iphone12-zhengmian"
    }
}

let { title, loginTypeTilte, com, icon } = toRefs(dynamicLoginTypeInfo)


</script>
<style lang="scss" scoped>
.login-page {
    .bg {
        video {
            position: fixed;
            left: 0;
            right: 0;
            bottom: 0;
            top: 0;
        }
    }

    .login-container {
        position: fixed;
        z-index: 99;
        // background:#fff;
        min-width: 400px;
        min-height: 400px;
        right: 10%;
        bottom: 15%;
        background-color: rgba(0, 0, 0, .3);
        color: #fff;
        border-radius: 20px;

        .login-inner {
            margin-top: 55px;
            width: 100%;

            .toggle {
                text-align: center;
                // text-decoration: underline;
                margin: 30px 0;

                b {
                    cursor: pointer;
                }
            }

            .title {
                text-align: center;
                color: #fff;
                margin-bottom: 30px;
            }

            :deep(.icon) {
                width: 2em;
                height: 2em;
                margin-right: 5px;
                vertical-align: middle;
            }
        }

    }

}
</style>

